<script lang="ts">
import type { TabType } from './Comps/Tabs.vue';
import type { BonusKeyType } from './Deposit/Bonus.vue';
import type { UseReadyAllReturn } from './ts/useReadyAll';
import Tip2FA from '~comp-b/auth/2fa/Tip2FA.vue';
import { globalPopups } from '~comp-b/global-popups';
import { CloseBtn } from '~/components/card';
import WithdrawLive from '~/pages/index/components/WithdrawLive.vue';
import Tabs, { getPcTabs } from './Comps/Tabs.vue';
import Deposit from './Deposit/index.vue';
import Withdraw from './Withdraw/index.vue';

export interface WalletProps {
  initTab?: Exclude<TabType['key'], 'pay'>;
  onClose?: () => void;
  readyAllQry?: UseReadyAllReturn;
  isDepositPage?: boolean;
  checkedBonusKey?: BonusKeyType;
  source?: 'newUser';
};

export const DEF_TAB_KEY: WalletProps['initTab'] = 'deposit';
</script>

<script setup lang="ts">
const props = withDefaults(defineProps<WalletProps>(), { initTab: DEF_TAB_KEY });

// const getMobileTabsRef = computed(() => getMobileTabs().filter(x => x.key !== 'withdraw'));

// const isIndexPage = ref(!props.isDepositPage);

// function backIndexPage() {
//   isIndexPage.value = true;
// }

const getTabsRef = computed(() => getPcTabs());

const getDefActiveTab = computed(() => {
  const _key = props.initTab || DEF_TAB_KEY;
  return getTabsRef.value.find(x => !x.disabled && x.key === _key);
});

const activeTab = ref(getDefActiveTab.value);

if (props.isDepositPage) {
  activeTab.value = getTabsRef.value.find(x => !x.disabled && x.key === 'deposit');
  // isIndexPage.value = false;
}

function selectTab(tab: TabType, isMobile?: boolean) {
  if (tab.key === 'pay') {
    antdMessage.warning({ content: $t('56Kpc6XNqChcuWz08yQwa'), duration: 3 });
    // isIndexPage.value = true;
    return;
  }
  activeTab.value = tab;
  // isIndexPage.value = !isMobile;
}

function close() {
  props.onClose?.();
  // backIndexPage();
  if (props.initTab === 'deposit' && props?.source === 'newUser') {
    globalPopups.attendance?.open();
  }
}
</script>

<template>
  <div class="pointer-events-auto grid grid-cols-[auto_1fr]">
    <div class="relative w-60 flex flex-col rounded-l-3 p-4 !bg-sys-layer-d">
      <div class="mb-4 flex-between">
        <div class="text-2xl font-semibold">
          {{ $t('qJaOFvSHkapUsSa7qb0s') }}
        </div>
      </div>
      <Tabs :active="activeTab" @select="selectTab" />

      <Tip2FA class="mt-auto" @open="close" />
    </div>

    <div class="min-h-110 rounded-r-3 bg-sys-layer-c p-4">
      <div class="mb-4 flex-between">
        <div class="text-lg">
          {{ activeTab?.label }}
        </div>
        <!-- <div v-else class="flex cursor-pointer items-center gap-x-2 text-lg" @click="backIndexPage">
          <i class="i-ep:arrow-left-bold text-sys-head h-4.5 w-4.5" />
          <div>{{ activeTab?.label }}</div>
        </div> -->
        <CloseBtn @click="close" />
      </div>
      <div class="mb-3 max-w-114">
        <WithdrawLive class="px-4.5 -mx-4.5" />
      </div>

      <!-- <Tabs
        v-if="activeTab?.key === 'deposit' && isIndexPage"
        :list="getMobileTabsRef"
        isMobile
        class="mt-5"
        @select="selectTab"
      /> -->
      <Deposit v-if="activeTab?.key === 'deposit'" :depositReadyQry="readyAllQry?.depositReadyQry" :checkedBonusKey="checkedBonusKey" />
      <Withdraw v-else-if="activeTab?.key === 'withdraw'" :withdrawReadyQry="readyAllQry?.withdrawReadyQry" />
    </div>
  </div>
</template>
